<template>
  <div
    class="component-pc-course__card classify-item"
    :class="[isActive?'active':'']"
    @click="toPath(detail.id)"
     @mouseenter="enter()" @mouseleave="leave()"
  >
    <div :class="['course-img']">
      <img :src="detail.iconPath" alt="">
      
    </div>
    <div class="course-msg">
      <div class="course-title">
        {{ detail.courseName }}
      </div>
      
      <div class="course-teacher">
        <div class="teacher">
            {{detail.acName}}
        </div>
        <div class="start-time">开播时间：<span v-if="this.videoVoList.length > 0">{{formatDate(this.videoVoList[0]['liveStartTime'],1)}}</span></div>
      </div>
    </div>
    <div class="hover-box">
      <div class="box-title">
        <span v-if="this.videoVoList.length > 0">
        {{this.videoVoList[0]['chapterName']}}
        </span>
      </div>
      <div class="teacher-user">
        <div class="teacher-head">
          <img :src="this.course.avatar" alt="">
        </div>
        <div class="teacher-name">
          {{detail.acName}}
        </div>
        
      </div>
      <div class="course-name">
          <div>课程：《</div>
          <div class="name">{{ detail.courseName }}</div>
          <div>》</div>
      </div>
      <div class="line"></div>
      <div class="live-time">
        <template v-if="isLiveStart()">
          <div class="left-time">
          <img class="not-open" src="/img/pc/not-open.png" alt="">
            开播时间
          </div>
          <div class="right-time">
            <span v-if="this.videoVoList.length > 0">{{formatDate(this.videoVoList[0]['liveStartTime'],2)}}</span>

            </div>
        </template>
        <template v-else>
          <div class="left-time">
          <img class="not-open" src="/img/pc/open-live.png" alt="">
            正在直播
          </div>
          <div class="right-time"><span v-if="this.videoVoList.length > 0">{{formatDate(this.videoVoList[0]['liveStartTime'],3)}}</span></div>
        </template>
        
        
      </div>
    </div>
    
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getLiveCourseChapter } from "~/api/course";
export default {
  props: ["detail", "major","memberDiscount","user_member","is_member"],
  components: {},
  data() {
    return {
      course:{},
      videoVoList:[],
      isActive:false,
    };
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      member_discount(state) {
        return state.member_discount;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
    }),
    
    isMemberFree(){
      // console.log("member_discount",this.memberDiscount)
      if(this.memberDiscount &&JSON.stringify(this.memberDiscount) !== "{}"){
        if(this.memberDiscount.majorIds.includes(this.detail.majorId) || this.memberDiscount.courseIds.includes(this.detail.id)){
          return true;
        }else{
          return false;
        }
      }
      
      
    },
  },
  watch: {},
  filter:{
    
  },
  methods: {
    //html剔除富文本标签，留下纯文本
    // getSimpleText(html){
    //   var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
    //   var msg = html.replace(re1,'');//执行替换成空字符
    //   return msg;
    // },
    enter(){
      if(this.videoVoList.length>0){
        this.isActive = true;
      }else{
        this.isActive = false
      }
      
      // console.log("鼠标移入")
    },
    leave(){
      this.isActive = false;
      // console.log("鼠标移出")
    },
    isLiveStart(){
      if(this.videoVoList.length>0){
        return this.videoVoList[0].liveStartTime > new Date().getTime();
      }else{
        return false;
      }
      
    },
    
    formatDate(timestamp,type){
      // console.log(timestamp)
      
      var time = new Date(timestamp);
      var newTime = new Date(new Date().getTime()-timestamp);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      var nmy = newTime.getFullYear();
      var nmm = newTime.getMonth()+1;
      var nmd = newTime.getDate();
      var mh = newTime.getHours();
      var mmm = newTime.getMinutes();
      var ms = newTime.getSeconds();
      var add0 = (m)=>{
        return m<10?'0'+m:m;
      }
      if(type === 1){
        return y+'-'+add0(m)+'-'+add0(d);
      }else if(type === 2){
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
      }else if(type === 3){
        
        return add0(mh)+':'+add0(mmm)+':'+add0(ms);
      }
      
    },
    toPath(id) {
      this.$router.push({
        path: "/coursedetail",
        query: {
          id
        }
      });
    },
    async getCourseChapter(courseId){
      let result = await getLiveCourseChapter({courseId});
      if(result && result.data.code == 200){
        this.course = result.data.data;
        this.videoVoList = result.data.data.videoVoList
        // console.log("直播课程章节=====",this.course)
      }else{
        this.$Message.error(
          this.$t("locale.pc.index.t9")
        );
      }
      
    }
  },
  created() {
    this.getCourseChapter(this.detail.id)
    // console.log("=============",this.detail)
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component-pc-course__card {
}
.classify-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  width: 278px;
  height: 280px;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 36px;
  margin-left: 11px;
  margin-right: 11px;
  .course-img{
    width: 100%;
    
    height: 160px;
    position: relative;
    img{
      // min-width: 278px;
      // object-fit: fill; 
      width: 100%;
      height: 100%;
      display: block;
    }
    
  }
  .course-msg{
    padding: 10px 16px;
    box-sizing: border-box;
    .course-title{
      color: #666666;
      font-weight: 700;
      font-size: 16px;
      display: -webkit-box;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        height: 44px;
        line-height: 22px;
    }
    .course-teacher{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 24px 0;
      color: #a3a9b2;
    }
  }
  .hover-box{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba($color: #000000, $alpha: 0.6);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    transform: translateY(100%);
    transition: transform .2s ease-in-out;
    padding: 40px 30px;
    box-sizing: border-box;
    color: #ffffff;
    .box-title{
      font-family: "Microsoft YaHei";
      font-size: 20px;
      // font-weight: bold;
      font-weight: 600;
      line-height: 26px;
      color: #ffffff;
      display: -webkit-box;
      -webkit-line-clamp:2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      height: 52px;
      max-width: 100%;
    }
    .teacher-user{
      display: flex;
      align-items: center;
      margin-top: 40px;
      .teacher-head{
        width: 30px;
        height: 30px;
        background-color: #ffffff;
        border: solid 1px #ffffff;
        border-radius: 50%;
        overflow: hidden;
      }
      .teacher-name{
        padding: 10px 0;
        margin-left: 6px;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .course-name{
      display: flex;
      font-size: 14px;
	    font-weight: bold;
      width: 100%;
      padding: 10px 0;
      .name{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
        text-align: center;
      }
    }
    .line{
      width: 100%;
      height: 1px;
      background-color: #ffffff;
    }
    .live-time{
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-time{
        display: flex;
        align-items: center;
        .not-open{
          display: block;
          margin-right: 4px;
          // background: red;
        }
      }
    }
  }
}
.classify-item.active{
  .hover-box{
    transform: none;
  }
  .course-img{
    width: 486.5px;
    height: 100%;
    filter: blur(2px);
  }
  .course-msg{
    display: none;
  }
}
</style>
<style lang="scss">
.component-pc-course__card {
  .ivu-tag {
    display: block;
    margin: 0;
    opacity: 0.8;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .ivu-tag + .ivu-tag {
    margin-top: 12px;
  }
}
</style>
